<template>
  <div>
    <a-modal
      :visible="add.visible"
      @ok="handleOk"
      @cancel="handleCancel"
      :title="add.title"
      :after-close="reset"
      style="top: 5px; left: 5px"
    >
      <a-card>
        <a-form :form="form">
          <a-form-item label="客户查询" style="display: flex">
            <a-input
              :disabled="flag"
              @keyup.enter="onSearch"
              placeholder="请输入卡号/联系号码/姓名"
              v-decorator="['name']"
              enter-button
              allow-clear
              style="width: 350px"
            />
            <a-button type="primary" @click="onSearch">搜索</a-button>
            <a-popover v-model="customer.visible" :visible="customer.visible" trigger="click">
              <!-- <span slot="content">a</span> -->
              <a-card title="选择客户" slot="content">
                <a-table
                  :rowKey="(record, index) => index"
                  :customRow="clicks"
                  :columns="columns"
                  :loading="loading"
                  :data-source="data"
                >
                </a-table>
              </a-card>
            </a-popover>
          </a-form-item>
          <a-form-item style="margin-bottom: 0">
            <a-row :gutter="24" style="justify-content: space-between">
              <a-col :md="4"
                ><div class="lItem-box">
                  客户姓名：<span class="lItem">{{ customer.name || '-' }}</span>
                </div></a-col
              >
              <a-col 
                :md="4"
                ><div class="lItem-box" style="display:flex">
                  <p style="width:70px;">联系电话：</p><span v-html="customer.tel?customer.tel.replace(/\;/g,'<br />'):customer.tel" class="lItem" style="display:block;width:calc(100% - 70px)">{{ customer.tel || '-' }}</span>
                </div></a-col
              >
              <a-col :md="4"
                ><div class="lItem-box">
                  客户卡号：<span class="lItem">{{ customer.cardNo || '-' }}</span>
                </div></a-col
              >
              <a-col :md="4"
                ><div class="lItem-box">
                  项目可退：<span class="lItem"><b style="color:red;font-weight:600">{{ customer.itemAmt || '0' }}</b> </span>
                </div></a-col
              >
              <a-col :md="4"
                ><div class="lItem-box">
                  预存卡可退：<span class="lItem"><b style="color:red;font-weight:600">{{ customer.ycAmt || '0' }}</b> </span>
                </div></a-col
              >
              <!-- <a-col>
                <a-form-item label="用户剩余预存款" style="display: flex; margin-right: 20px; margin-bottom: 5px;font-weight:bold;">
                  <div class="lItem" style="color: red; line-height: 36px">{{ AdvanceDeposit }}</div>
                </a-form-item>
              </a-col> -->
              
            </a-row>
          </a-form-item>
          <a-row style="display: inline-flex; justify-content: space-between">
            <a-form-item label="退款类型" style="display: flex; margin-right: 20px; margin-bottom: 5px">
              <a-select
                @change="rState"
                style="margin: 0 10px; width: 225px"
                v-decorator="['typeId', { rules: [{ required: true, message: '请输入！' }] }]"
              >
                <a-select-option v-for="item in isRefund" :key="item.id" :isdisabled="item.label" :value="item.label">
                  <div>{{ item.value }}</div>
                </a-select-option>
              </a-select>
            </a-form-item>

            <!-- <a-form-item label="退款类别">
              <a-select
                style="margin: 0 10px; width: 225px"
                v-decorator="['classId', { rules: [{ required: true, message: '请输入！' }] }]"
              >
                <a-select-option v-for="item in RefundType" :key="item.id" :isdisabled="item.label" :value="item.label">
                  <div>{{ item.value }}</div>
                </a-select-option>
              </a-select>
            </a-form-item> -->
            <a-form-item label="退款原因" style="display: flex; margin-right: 20px; margin-bottom: 5px">
              <a-select
                style="margin: 0 10px; width: 225px"
                v-decorator="['reasonType', { rules: [{ required: true, message: '请输入！' }] }]"
              >
                <a-select-option
                  v-for="item in RefundReason"
                  :key="item.id"
                  :isdisabled="item.label"
                  :value="item.label"
                >
                  <div>{{ item.value }}</div>
                </a-select-option>
              </a-select>
            </a-form-item>
            
            <a-form-item label="用户剩余押金" v-if="Deposit" style="display: flex">
              <div class="lItem" style="color: red; line-height: 36px">{{ Deposit }}</div>
            </a-form-item>
          </a-row>
          <!-- <a-row style="display: inline-flex; justify-content: space-between">
             <a-form-item label="退款金额">
              <div class="lItem" style="color: red">
                {{ Money }}
               <a-input-number
                  step="1"
                  style="margin: 0 10px; width: 245px"
                  :min="0"
                  :max="1000000"
                  v-decorator="['deposit']"
                ></a-input-number> 
              </div>
            </a-form-item>
             <a-form-item label="退还增值金">
              <div class="lItem" style="color: red">
                {{ subMoney }}
             <a-input-number
                  style="margin: 0 10px; width: 245px"
                  step="1"
                  :min="0"
                  :max="1000000"
                  v-decorator="['zzjAmt']"
                ></a-input-number>
              </div>
            </a-form-item>
             <a-form-item label="退还积分">
              <div class="lItem" style="color: red">
                {{ jf }}
             <a-input-number
                  style="margin: 0 10px; width: 245px"
                  step="1"
                  :min="0"
                  :max="1000000"
                  v-decorator="['jfAmt']"
                ></a-input-number>
              </div>
            </a-form-item>
          </a-row> -->
          <a-form-item label="申请原因">
            <div style="width: 600px">
              <a-input
                type="textarea"
                v-decorator="['reason', { rules: [{ required: true, message: '请输入！' }] }]"
              ></a-input>
            </div>
          </a-form-item>
        </a-form>
        <a-row :gutter="24">
          <a-col :span="24">
            <div style="margin: 10px">
              <a-button @click="changPro()" type="primary" :disabled="flag"> 新增</a-button>
            </div>
            <a-table
              :scroll="{ x: xx }"
              :rowKey="
                (record, index) => {
                  return index
                }
              "
              :columns="DetailColumns"
              :dataSource="DetailData"
              :pagination="false"
              :loading="loadings"
            >
              <a slot="operation" slot-scope="text, record, index">
                <a-popconfirm title="删除该项数据?" @confirm="() => remove(record,index)">
                  <a>删除</a>
                </a-popconfirm>
              </a> 
              <template slot="ramt" slot-scope="text, record, index">
                <a-input-number
                  :step="1"
                  :min="0"
                  :max="record.refundable"
                  allow-clear
                  :value="text"
                  style="width: 165px"
                  placeholder="实退金额"
                  @change="(value) => valChange(value, record, index, 'ramt')"
                  :class="record.principalBorder ? 'colorBorder' : ''"
                  @blur="blurChange('principalBorder', 'ramt')"
                  :ref="`principalBorder_${index}`"
                  :formatter="(value) => {
                    let reg = /^(-)*(\d+)\.(\d\d).*$/;
                    return `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, '').replace(reg,'$1$2.$3');
                  }"
                  :parser="(value) => {
                    let reg = /^(-)*(\d+)\.(\d\d).*$/;
                    return value.replace(/\s?|(,*)/g, '').replace(reg,'$1$2.$3');
                  }"
                ></a-input-number>
              </template> 
              <template slot="rgold" slot-scope="text, record, index">
                <a-input-number
                  v-if="record.retreatitemGold > 0"
                  :min="0"
                  :max="record.retreatitemGold" 
                  :step="1"
                  allow-clear
                  :value="text"
                  @change="(value) => valChange(value, record, index, 'rgold')"
                  style="width: 165px"
                  placeholder="实退增值金"
                  :class="record.addedBorder ? 'colorBorder' : ''"
                  @blur="blurChange('addedBorder', 'rgold')"
                  :ref="`addedBorder_${index}`"
                  :formatter="(value) => {
                    let reg = /^(-)*(\d+)\.(\d\d).*$/;
                    return `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, '').replace(reg,'$1$2.$3');
                  }"
                  :parser="(value) => {
                    let reg = /^(-)*(\d+)\.(\d\d).*$/;
                    return value.replace(/\s?|(,*)/g, '').replace(reg,'$1$2.$3');
                  }"
                ></a-input-number>
                <div v-if="record.retreatitemGold <= 0">{{record.retreatitemGold}}</div>
              </template>

              <!-- 退卡 -->
              <template slot="hosDeposit" slot-scope="text, record, index">
                <a-input-number
                  id="deposit"
                  :min="0"
                  :step="1"
                  :max="record.offsetAmtNo"
                  :value="text"
                  @change="(value) => changeVal(value, record, index)"
                  style="width: 165px"
                ></a-input-number>
              </template>
              <template slot="retreatDeposit" slot-scope="text, record, index">
                <a-input-number
                  :class="record.specBorder ? 'colorBorder' : ''"
                  id="retreatDeposit"
                  :min="0"
                  :max="record.offsetAmtNo"
                  :value="text"
                  @change="(value) => changeVal2(value, record, index)"
                  style="width: 165px"
                  @blur="blurChange('specBorder', 'retreatDeposit')"
                  :ref="`specBorder_${index}`"
                  :formatter="(value) => {
                    let reg = /^(-)*(\d+)\.(\d\d).*$/;
                    return `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, '').replace(reg,'$1$2.$3');
                  }"
                  :parser="(value) => {
                    let reg = /^(-)*(\d+)\.(\d\d).*$/;
                    return value.replace(/\s?|(,*)/g, '').replace(reg,'$1$2.$3');
                  }"
                ></a-input-number>
              </template>
              <!-- 退卡结束 -->

              <!--实退次数-->
              <template slot="rqty" slot-scope="text, record, index">
                <!-- <a-form :form="form" layout="inline"> -->
                <!-- <a-form-item has-feedback id="rqty"> --> 
                <a-input-number
                  v-if="record.refundablerqty > 0"
                  :min="0"
                  :step="1" 
                  :value="text"
                  :max="record.refundablerqty"
                  @change="(value) => valChange(value, record, index, 'rqty')"
                  style="width: 165px"
                  placeholder="实退次数"
                  :class="record.returnTimesBorder ? 'colorBorder' : ''"
                  @blur="blurChange('returnTimesBorder', 'rqty')"
                  :ref="`returnTimesBorder_${index}`"
                  :precision="0"
                ></a-input-number>
                <div v-if="record.refundablerqty <= 0">{{record.refundablerqty}}</div>
                <!-- </a-form-item> -->
                <!-- </a-form> -->
              </template>
              <template slot="rintegral" slot-scope="text, record, index">
                <!-- <a-form :form="form" layout="inline" id="rintegral"> -->
                <!-- <a-form-item has-feedback> -->
                  
                <a-input-number
                  v-if="record.retreatitemJf > 0"
                  :min="0"
                  :step="1"
                  :max="record.retreatitemJf"
                  allow-clear
                  :value="text"
                  @change="(value) => valChange(value, record, index, 'rintegral')"
                  style="width: 165px"
                  placeholder="实退积分"
                  :class="record.integralBorder ? 'colorBorder' : ''"
                  @blur="blurChange('integralBorder', 'rintegral')"
                  :ref="`integralBorder_${index}`"
                  :formatter="(value) => {
                    let reg = /^(-)*(\d+)\.(\d\d).*$/;
                    return `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, '').replace(reg,'$1$2.$3');
                  }"
                  :parser="(value) => {
                    let reg = /^(-)*(\d+)\.(\d\d).*$/;
                    return value.replace(/\s?|(,*)/g, '').replace(reg,'$1$2.$3');
                  }"
                ></a-input-number>
                <div v-if="record.retreatitemJf <= 0">{{record.retreatitemJf}}</div>
                <!-- </a-form-item> -->
                <!-- </a-form> --> 
              </template>
            </a-table>
          </a-col>
        </a-row>
      </a-card>
    </a-modal>
    <minTable :miniDB="miniDB" :filterData="DetailData" ref="miniTable" @getDetail="getDetail"> </minTable>
  </div>
</template>
<script>
import minTable from './minTable.vue'

import { getWorkers, addRefund, getUserDetail, edit, editSubmit } from '@/api/cashier/cashier'
export default {
  components: { minTable },
  props: {
    add: {},
  },
  watch: {
    // DetailData: {
    //   handler() {
    //     let m = 0
    //     console.log(this.form.getFieldsValue())
    //     // if (this.DetailData.length > 0) {
    //     //   for (var i = 0; i < this.DetailData.length; i++) {
    //     //     this.Money += Number(this.DetailData[i].ramt) || 0
    //     //     console.log(this.DetailData[i])
    //     //   }
    //     //   this.Money = m
    //     // } else {
    //     //   this.Money = 0
    //     // }
    //   },
    //   immediate: true,
    //   deep: true,
    // },
  },
  computed: {
    subMoney() {
      let m = 0
      return 0
    },
    jf() {
      let m = 0
      return 0
    },
  },
  data() {
    return {
      Money: 0,
      xx: 2800,
      queryParams: {
        pageSize: 1,
        pageNum: 20,
      },
      state: '1',
      Deposit: 0, //押金
      AdvanceDeposit: 0, //预存款
      form: this.$form.createForm(this),
      miniDB: {
        visible: false,
        title: '选择项目',
        width: '1300px',
      },
      orderId: '',
      loadings: false,
      confirmLoading: false,
      flag: false,
      data: [],
      db: {
        cid: '',
      },
      loading: false,
      customer: {
        visible: false,
      },
      isRefund: [
        { id: 0, value: '退项目', label: '1' },
        { id: 1, value: '退卡', label: '2' },
        // { id: 2, value: '退押金', label: '3' },
      ],

      RefundReason: [
        { id: 1, value: '效果问题', label: '1' },
        { id: 2, value: '身体原因', label: '2' },
        { id: 3, value: '害怕手术', label: '3' },
        { id: 4, value: '家人反对', label: '4' },
        { id: 5, value: '暂不想做', label: '5' },
        { id: 6, value: '经济原因', label: '6' },
        { id: 7, value: '效果原因', label: '7' },
        { id: 8, value: '更改方案', label: '8' },
      ],
      isType: [],
      DetailData: [],
      DetailColumns: [
        { title: '项目名称', align: 'center', dataIndex: 'itemName', key: 'itemName', width: 150, ellipsis: true },
        { title: '成交本金', align: 'center', dataIndex: 'payableAmt', key: 'payableAmt' },
        { title: '实收本金', align: 'center', dataIndex: 'paidAmt', key: 'paidAmt' },
        { title: '可退本金', align: 'center', dataIndex: 'refundable', key: 'refundable' },
        { title: '实退本金', align: 'center', dataIndex: 'ramt', key: 'ramt', scopedSlots: { customRender: 'ramt' } },
        { title: '购买次数', align: 'center', dataIndex: 'qty', key: 'qty' },
        { title: '可退次数', align: 'center', dataIndex: 'refundablerqty', key: 'refundablerqty' },
        {
          title: '实退次数',
          dataIndex: 'rqty',
          key: 'rqty',
          align: 'center',
          width: 150,
          scopedSlots: {
            customRender: 'rqty',
          },
        },
        { title: '实收增值金', align: 'center', dataIndex: 'itemGold', key: 'itemGold' },
        { title: '可退增值金', align: 'center', dataIndex: 'retreatitemGold', key: 'retreatitemGold' },
        {
          title: '实退增值金',
          dataIndex: 'rgold',
          align: 'center',
          key: 'rgold',
          scopedSlots: {
            customRender: 'rgold',
          },
        },
        { title: '实收积分', align: 'center', dataIndex: 'jf', key: 'jf' },
        { title: '可退积分', align: 'center', dataIndex: 'retreatitemJf', key: 'retreatitemJf' },
        {
          title: '实退积分',
          dataIndex: 'rintegral',
          key: 'rintegral',
          align: 'center',
          scopedSlots: {
            customRender: 'rintegral',
          },
        },
        
        {
          title: '操作',
          width: 80,
          align: 'center',
          fixed: 'right',
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      columns: [
        {
          title: '客户姓名',
          dataIndex: 'name',
          key: 'name',
          customRender: (name) => {
            if (!name) {
              return '-'
            } else {
              return name
            }
          },
        },
        {
          title: '客户卡号',
          dataIndex: 'cardNo',
          key: 'cardNo',
          customRender: (cardNo) => {
            if (!cardNo) {
              return '-'
            } else {
              return cardNo
            }
          },
        },
        {
          title: '联系号码',
          dataIndex: 'tel',
          key: 'tel',
          customRender: (tel) => {
            if (!tel) {
              return '-'
            } else {
              return tel
            }
          },
        },
        {
          title: '开发员',
          dataIndex: 'devName',
          key: 'devName',
          customRender: (devName) => {
            if (!devName) {
              return '-'
            } else {
              return devName
            }
          },
        },
        {
          title: '咨询师',
          dataIndex: 'consultantname',
          key: 'consultantname',
          customRender: (consultantname) => {
            if (!consultantname) {
              return '-'
            } else {
              return consultantname
            }
          },
        },
        {
          title: '上次来访',
          dataIndex: 'modifyDate',
          key: 'modifyDate',
          customRender: (modifyDate) => {
            if (!modifyDate) {
              return '-'
            } else {
              return modifyDate
            }
          },
        },
      ],
      visible: false,
      form: this.$form.createForm(this, { name: 'coordinated' }),

      oneData: [],
      twoData: []
    }
  },
  methods: {
    // change事件赋值
    valChange(value, record, index, t) {
      console.log(value)
      this.DetailData[index][`${t}`] = value
      console.log(this.DetailData)
      this.DetailData = [...this.DetailData]
    },

    // 退款的blur 事件
    blurChange(t, rep) {
      // 判读输入框实退金额是否输入
      console.log(t, rep)
      let setData = this.DetailData.map((item) => {
        if (item[`${rep}`] != undefined && item[`${rep}`] !== '' && item[`${rep}`] != null) {
          item[`${t}`] = false
        } else {
          item[`${t}`] = true
        }
        return item
      })
      console.log(setData)
      this.DetailData = [...setData]
    },
    changeVal(value, row, index) {
      var t = null
      return function () {
        clearTimeout(t)
        t = setTimeout(() => {
          this.$nextTick(() => {
            this.DetailData[index].hosDeposit = value
            this.DetailData = [...this.DetailData]
          })
        }, 300)

        console.log(value, row, index, '????', this.DetailData)
      }
    },
    changeVal2(value, row, index) {
      //预存
      // var t = null
      //  console.log(value, row, index, '????', this.DetailData,t)
      // return function () {
      //   clearTimeout(t)
      //   t = setTimeout(() => {
      var t = null
      // setTimeout(() => {
      //   this.$nextTick(() => {
      this.DetailData[index].retreatDeposit = value //rDeposit
      this.DetailData = [...this.DetailData]
      //   })
      // }, 1000)

      // }, 300)
    },
    
    rState(val) {
      console.log(val)
      this.state = val
      this.DetailData = []
      this.oneData = []
      this.twoData = []
    },
    isfill(db) {
      //supertable过来的修改显示函数！！
      this.flag = true
      this.db.customerId = db.customerId
      console.log(db, db.typeId, db.customerBillList)
      console.log('选退卡')
      edit({ id: db.customerId, refundId: db.refundId }).then((res) => {
        console.log(res)
        this.customer.name = res.rows[0].name
        this.customer.tel = res.rows[0].tel
        this.customer.cardNo = res.rows[0].cardNo
        this.customer.itemAmt = res.rows[0].itemAmt
        this.customer.ycAmt = res.rows[0].ycAmt
        this.AdvanceDeposit = res.rows[0].ycAmt //用户剩余预存款
        res.rows.forEach((item) => {
          item.name = '退预存款'
        })
        if (res.rows[0].typeId === '2' && res.rows[0].customerBillList) {
          this.DetailData = res.rows[0].customerBillList
          this.state = '2' //提交的时候，这东西用来做判断
          this.db.refundId = res.rows[0].id //退预存的refundid
          console.log(res.rows[0].customerBillList.retreatDeposit)
          for (var i = 0; i < res.rows[0].customerBillList.length; i++) {
            res.rows[0].customerBillList[0].rDeposit = res.rows[0].customerBillList[0].retreatDeposit
          }
          // this.db.rDeposit = res.rows[0].customerBillList.retreatDeposit
          this.xx = 0
          this.DetailColumns = [
            {
              title: '充值日期',
              dataIndex: 'rpDate',
              align: 'center',
              width: 120,
              key: 'rpDate',
              ellipsis: true,
            },
            {
              title: '名称',
              dataIndex: 'itemName',
              align: 'center',
              key: 'itemName',
              width: 120,
            },
            {
              title: '总金额',
              dataIndex: 'rpMmt',
              key: 'rpMmt',
              align: 'center',
              width: 80,
            },
            {
              title: '可退金额',
              dataIndex: 'offsetAmtNo',
              align: 'center',
              key: 'offsetAmtNo',
              width: 80,
            },
            {
              title: '实退预存',
              dataIndex: 'retreatDeposit',
              key: 'retreatDeposit',
              align: 'center',
              width: 80,
              scopedSlots: {
                customRender: 'retreatDeposit',
              },
            },
            {
              title: '已核销金额',
              dataIndex: 'offsetAmt',
              align: 'center',
              key: 'offsetAmt',
              width: 80,
            },

            {
              title: '操作',
              width: 80,
              align: 'center',
              // fixed: 'right',
              dataIndex: 'operation',
              key: 'operation',
              scopedSlots: { customRender: 'operation' },
            },
          ]
        } else if (res.rows[0].typeId === '1' && res.rows[0].detailList) {
          this.xx = 2800
          res.rows[0].detailList.forEach((item) => {
            item.rgold = item.rgold //实退增值金
            item.rintegral = item.rintegral //实退积分
            item.refundableitemGold = item.valueGoldTwo // 可退增值金
            item.itemJf = item.integral //实收积分
            item.qty = item.qty //可退次数次数
            item.refundablerqty = item.qty //可退次数（以前的值是qty，1026）
            item.refundableitemJf = item.integralTwo // 可退积分
            // item.paidAmt = item.productChargeAmt //实收本金
            // item.payableAmt = item.payableAmt //成交本金
            // item.refundable = item.amt // 可退金额

            item.paidAmt = item.price //实收本金
            item.payableAmt = item.productChargeAmt //成交本金
            item.refundable = item.amt // 可退金额 
            this.db.refundId = res.rows[0].id
            
            item.retreatitemGold = item.valueGoldTwo
            item.retreatitemJf = item.integralTwo
          })
          this.DetailData = res.rows[0].detailList
          this.DetailColumns = [
            { title: '项目名称', align: 'center', dataIndex: 'itemName', key: 'itemName', width: 150, ellipsis: true },
            { title: '成交本金', align: 'center', dataIndex: 'payableAmt', key: 'payableAmt' },
            { title: '实收本金', align: 'center', dataIndex: 'paidAmt', key: 'paidAmt' },
            { title: '可退本金', align: 'center', dataIndex: 'refundable', key: 'refundable' },
            
            {
              title: '实退本金',
              align: 'center',
              dataIndex: 'ramt',
              key: 'ramt',
              scopedSlots: { customRender: 'ramt' },
            },
            { title: '购买次数', align: 'center', dataIndex: 'buyQty', key: 'buyQty' },
            { title: '可退次数', align: 'center', dataIndex: 'refundablerqty', key: 'refundablerqty' },
            {
              title: '实退次数',
              dataIndex: 'rqty',
              key: 'rqty',
              width: 150,
              align: 'center',
              scopedSlots: {
                customRender: 'rqty',
              },
            },
            { title: '实收增值金', align: 'center', dataIndex: 'valueGold', key: 'valueGold' },
            { title: '可退增值金', align: 'center', dataIndex: 'valueGoldTwo', key: 'valueGoldTwo' },
            {
              title: '实退增值金',
              dataIndex: 'rgold',
              key: 'rgold',
              align: 'center',
              scopedSlots: {
                customRender: 'rgold',
              },
            },
            { title: '实收积分', align: 'center', dataIndex: 'integral', key: 'integral' },
            { title: '可退积分', align: 'center', dataIndex: 'integralTwo', key: 'integralTwo' },
            {
              title: '实退积分',
              dataIndex: 'rintegral',
              key: 'rintegral',
              align: 'center',
              scopedSlots: {
                customRender: 'rintegral',
              },
            },
           
            {
              title: '操作',
              width: 80,
              align: 'center',
              fixed: 'right',
              dataIndex: 'operation',
              key: 'operation',
              scopedSlots: { customRender: 'operation' },
            },
          ]
          this.state = '1' //提交的时候这东西用来做判断
        }
        this.$nextTick(() => {
          this.form.setFieldsValue({
            reason: res.rows[0].reason,
            // jfAmt: res.rows[0].jfAmt,
            // zzjAmt: res.rows[0].zzjAmt,
            // amt: res.rows[0].amt,
            reasonType: res.rows[0].reasonType,
            typeId: res.rows[0].typeId,
          })
        })
      })
    },

    getDetail(db, state, type = "") {
      console.log('添加', db, state, type)
      if (state === '1' && db) {
        console.log(db)
        // return false
        this.xx = 2800
        this.DetailColumns = []

        this.DetailColumns = [
          {
            title: '项目名称',
            dataIndex: 'itemName',
            key: 'itemName',
            ellipsis: true,
            align: 'center',
            customRender: (itemName) => {
              return itemName != '' ? itemName : '-'
            },
          },
          {
            title: '成交本金',
            dataIndex: 'payableAmt',
            key: 'payableAmt',
            align: 'center',
            // customRender: (payableAmt) => {
            //   return payableAmt > 0 ? payableAmt : '-'
            // },
          },
          {
            title: '实收本金',
            dataIndex: 'paidAmt',
            key: 'paidAmt',
            align: 'center',
            customRender: (paidAmt) => {
              return paidAmt > 0 ? paidAmt : '-'
            },
          },
          {
            title: '可退本金',
            dataIndex: 'refundable',
            key: 'refundable',
            align: 'center',
            customRender: (refundable) => {
              return refundable > 0 ? refundable : '-'
            },
          },
          {
            title: '实退本金',
            dataIndex: 'ramt',
            key: 'ramt',
            align: 'center',
            scopedSlots: { customRender: 'ramt' },
          },
          { title: '购买次数', align: 'center', dataIndex: 'qty', key: 'qty' },
          { title: '可退次数', align: 'center', dataIndex: 'refundablerqty', key: 'refundablerqty' },
          {
            title: '实退次数',
            dataIndex: 'rqty',
            align: 'center',
            key: 'rqty',
            scopedSlots: {
              customRender: 'rqty',
            },
          },
          {
            title: '实收增值金',
            dataIndex: 'itemGold',
            key: 'itemGold',
            align: 'center',
          },
          {
            title: '可退增值金',
            align: 'center',
            dataIndex: 'retreatitemGold',
            key: 'retreatitemGold',
          },
          {
            title: '实退增值金',
            dataIndex: 'rgold',
            key: 'rgold',
            align: 'center',
            scopedSlots: {
              customRender: 'rgold',
            },
          },
          { title: '实收积分', align: 'center', dataIndex: 'jf', key: 'jf' },
          { title: '可退积分', align: 'center', dataIndex: 'retreatitemJf', key: 'retreatitemJf' },
          {
            title: '实退积分',
            dataIndex: 'rintegral',
            key: 'rintegral',
            align: 'center',
            scopedSlots: {
              customRender: 'rintegral',
            },
          },
          
          {
            title: '操作',
            width: 80,
            align: 'center',
            fixed: 'right',
            dataIndex: 'operation',
            key: 'operation',
            scopedSlots: { customRender: 'operation' },
          },
        ]
        
        if(type == "remove"){
          let newData = this.oneData.filter(item => {
            return item.onlyId != db.onlyId
          })
          this.oneData = [...newData] 
           
        }else if(type == "productList"){
          if(db.refundable <= 0){
            this.$message.error('该项目可退金额不足')
            return false
          } 
          let boolD = this.oneData.find(item => {
            return item.onlyId == db.onlyId
          })  
          if(boolD == undefined){
            db.principalBorder = false
            // 实退增值金
            db.addedBorder = false
            // 实退积分
            db.integralBorder = false
            // 实退次数
            db.returnTimesBorder = false

            // 默认可退增值金跟可退积分为0  
            db.rgold = db.retreatitemGold > 0 ? '' : 0 
            db.rintegral = db.retreatitemJf > 0 ? '' : 0
            db.rqty = db.refundablerqty > 0 ? '' : 0
            // retreatitemGold -- rgold
            // refundablerqty -- rqty
            // retreatitemJf -- rintegral

            this.oneData = [...this.oneData,db] 
          }
          
        }else{
          db.forEach((item) => {
            // item.integral = Number(item.integral)
            // item.qty = Number(item.qty)
            // item.retreatDeposit = Number(item.retreatDeposit)
            // item.offsetAmtNo = Number(item.offsetAmtNo)
            // item.refundable = Number(item.refundable)
            // item.specBorder = false

            // Border 判断是否输入值 红色框
            // 实退本金
            item.principalBorder = false
            // 实退增值金
            item.addedBorder = false
            // 实退积分
            item.integralBorder = false
            // 实退次数
            item.returnTimesBorder = false

            // 默认可退增值金跟可退积分为0 
            item.rgold = item.retreatitemGold > 0 ? '' : 0 
            item.rintegral = item.retreatitemJf > 0 ? '' : 0
            item.rqty = item.refundablerqty > 0 ? '' : 0
          })
          let newData = db.filter(item => {
            return item.packageList == undefined || item.packageList == null
          })
          this.twoData = [...newData]
        }

         

        console.log(this.oneData,this.twoData)
        this.DetailData = [...this.oneData,...this.twoData] 
 
         
      } else if (state === '2' && db) {
        this.DetailColumns = []
        this.xx = 0
        this.DetailColumns = [
          {
            title: '充值日期',
            dataIndex: 'rpDate',
            width: 120,
            ellipsis: true,
            align: 'center',
            key: 'rpDate',
          },
          {
            title: '名称',
            dataIndex: 'itemName',
            key: 'itemName',
            align: 'center',
            width: 120,
          },
          {
            title: '总金额',
            dataIndex: 'rpMmt',
            key: 'rpMmt',
            align: 'center',
            width: 80,
          },
          {
            title: '可退金额',
            dataIndex: 'offsetAmtNo',
            key: 'offsetAmtNo',
            align: 'center',
            width: 80,
          },
          {
            title: '实退预存',
            dataIndex: 'retreatDeposit',
            key: 'retreatDeposit',
            align: 'center',
            width: 150,
            scopedSlots: {
              customRender: 'retreatDeposit',
            },
          },
          {
            title: '已核销金额',
            dataIndex: 'offsetAmt',
            key: 'offsetAmt',
            align: 'center',
            width: 80,
          },

          {
            title: '操作',
            width: 80,
            align: 'center',
            fixed: 'right',
            dataIndex: 'operation',
            key: 'operation',
            scopedSlots: { customRender: 'operation' },
          },
        ]
        db.forEach((item) => {
          item.specBorder = false
        })
        this.DetailData = [...db] //当状态为2的时候是退预存款retreatDeposit
        console.log('2')
      }
    },
    clicks(record) {
      return {
        on: {
          dblclick: (e) => {
            console.log(e, record, this.customer)
            this.$nextTick(() => {
              this.customer.name = record.name
              this.customer.cardNo = record.cardNo
              this.customer.tel = record.tel
              this.customer.itemAmt = record.itemAmt
              this.customer.ycAmt = record.ycAmt
            })
            this.AdvanceDeposit = record.ycAmt //用户剩余预存款
            this.db.cid = record.id
            this.customer.visible = false
          },
        },
      }
    },
    reset() {
      console.log('回调')
      this.AdvanceDeposit = 0
      this.form.resetFields()
      this.db.cid = ''
      this.customer = {}
      this.DetailData = []
      this.flag = false
      this.state = '1'
      console.log(this.customer)
    },
    onSearch() {
      this.oneData = []
      this.twoData = []
      this.DetailData = []
      this.state = '1'
      
      
      let form_values = this.form.getFieldsValue()
      form_values.pageNum = 1
      form_values.pageSize = 20
      if (form_values.name) {
        this.loading = true 
        getWorkers({ name: form_values.name.replace(/\s*/g,""), pageSize: form_values.pageSize, pageNum: form_values.pageNum }).then(
          (res) => {
            console.log(res)
            this.loading = false
            if (res.code.toString() !== '200') {
              this.$message.error(res.message)
              return
            }
            
            this.data = res.rows
            if (this.data.length.toString() === '1') {
              this.customer = { ...res.rows[0] }
              this.AdvanceDeposit = res.rows[0].ycAmt
              this.Deposit = res.rows[0].customerYj
              this.db.cid = res.rows[0].id
              let queryDB = {}
              queryDB.id = res.rows[0].id
              queryDB.pageNum = 1
              queryDB.pageSize = 20
              this.customer.visible = false
            } else {
              this.customer.visible = true
              this.loading = false
              this.$message.success(res.msg)
            }

            this.customer = Object.assign({}, this.customer)
            this.form.resetFields()
          }
        )
      } else {
        this.$message.error('请填写卡号、联系号码、姓名')
        this.loading = false
        return
      }
    },
    addProject(value) {
      let Num = []
      // 判读输入框实退金额是否输入
      let setData = this.DetailData.map((item,index) => {
        if (item.ramt === undefined || item.ramt === '' || item.ramt === null) {
          item.principalBorder = true 
          this.$refs[`principalBorder_${index}`].focus();
          Num.push(1)
        } else {
          item.principalBorder = false
        }

        // 实退增值金
        if (item.rgold === undefined || item.rgold === '' || item.rgold === null) {
          item.addedBorder = true
          Num.push(1)
          this.$refs[`addedBorder_${index}`].focus();
        } else {
          item.addedBorder = false
        }

        // 实退积分
        if (item.rintegral === undefined || item.rintegral === '' || item.rintegral === null) {
          item.integralBorder = true
          Num.push(1)
          this.$refs[`integralBorder_${index}`].focus();
        } else {
          item.integralBorder = false
        }

        // 实退次数
        if (item.rqty === undefined || item.rqty === '' || item.rqty === null) {
          item.returnTimesBorder = true
          this.$refs[`returnTimesBorder_${index}`].focus();
          Num.push(1)
        } else {
          item.returnTimesBorder = false
        }
        return item
      })
      this.DetailData = [...setData] 
      if (Num.length > 0) {
        this.$message.error('请完善退款所需信息')
        return false
      }

      let values = value
      console.log(this.db.customerId)
      if (this.state === '1' && !this.db.customerId) {
        console.log('新增项目', values)
        // return false
        // values.clientID = this.db.cid
        values.billState = 3
        let type = 0 //写死的，0是项目！！
        let tgsRefundList = []
        let tgsRefundDetailList = []
        console.log(this.DetailData, 'this.DetailData[i].refundablerqty')
        // return false

        console.log(this.DetailData, value)
        for (var i = 0; i < this.DetailData.length; i++) {
          tgsRefundDetailList.push({
            price: this.DetailData[i].paidAmt, // 实收金额
            rqty: this.DetailData[i].rqty, //实退次数
            buyQty: this.DetailData[i].qty, //购买次数
            qty: this.DetailData[i].refundablerqty, //可退（自己输的那个rqty）
            ramt: this.DetailData[i].ramt, //用户的行输入金额，
            itemId: this.DetailData[i].itemId || '',
            itemName: this.DetailData[i].itemName || '',
            // amt: this.DetailData[i].amt || '',
            rgold: this.DetailData[i].rgold,
            valueGold: this.DetailData[i].retreatitemGold,
            rintegral: this.DetailData[i].rintegral,
            integral: String(this.DetailData[i].retreatitemJf) || '1',
            tbItemId: this.DetailData[i].tbItemId || '',
            xj: this.DetailData[i].xj,
            sk: this.DetailData[i].sk,
            zz: this.DetailData[i].zz,
            amt: this.DetailData[i].refundable,
            productChargeAmt: this.DetailData[i].payableAmt, // 成交金额
            onlyId: this.DetailData[i].onlyId, // 唯一id

            rqty: this.DetailData[i].rqty,
            deposit: this.DetailData[i].deposit
          })
          tgsRefundList.push({
            clientID: this.db.cid,
            billId: this.DetailData[i].billId,
            typeId: values.typeId,
            reasonType: values.reasonType,
            reason: values.reason,
            orderId: this.DetailData[i].orderId,
            // amt:'',
            // zzjAmt:'',
            // jfAmt:'',
            billState: '3',
          })
        }
        if (this.customer.name || this.customer.cardNo || this.customer.tel) {
          console.log('触发')
          addRefund({
            tgsRefundDetailList,
            tgsRefundList: [tgsRefundList[0]],
            type: type,
            clientId: this.db.cid,
            billState: 3,
          }).then((res) => {
            if (res.code.toString() !== '200' && res.code) return this.$message.error(res.message || res.msg)
            this.$message.success(res.message || res.msg)
            this.add.visible = false
            this.$emit('addFun')
          })
        } else {
          this.$message.error('用户信息为空，请搜索')
        }
      } else if (this.state === '1' && this.db.customerId) {
        console.log('修改项目', values)
        values.clientID = this.db.customerId
        values.billState = 3
        let detailList = []
        console.log(this.DetailData)
        for (var i = 0; i < this.DetailData.length; i++) {
          detailList.push({
            price: this.DetailData[i].paidAmt, // 实收金额    - - 
            rqty: this.DetailData[i].rqty, //实退次数   -- 
            buyQty: this.DetailData[i].buyQty, //购买次数  -- 
            qty: this.DetailData[i].qty, //可退次数（自己输的那个rqty）  -- 
            ramt: this.DetailData[i].ramt, //用户的行输入金额，
            itemId: this.DetailData[i].itemId || '',
           
            itemName: this.DetailData[i].itemName || '',
            amt: this.DetailData[i].amt || '',
            rgold: this.DetailData[i].rgold,
            valueGold: this.DetailData[i].valueGold,
            
            
            rintegral: this.DetailData[i].rintegral,
            integral: this.DetailData[i].integral,  // 可退积分

            productChargeAmt: this.DetailData[i].productChargeAmt, // 成交金额
            

            // tbItemId: this.DetailData[i].tbItemId || '',
            xj: this.DetailData[i].xj,
            sk: this.DetailData[i].sk,
            zz: this.DetailData[i].zz,
            onlyId: this.DetailData[i].onlyId,
            // amt: this.DetailData[i].refundable,
            // qty: this.DetailData[i].qty,
            // rqty: values.rqty[i],
          })
        }
        editSubmit({
          detailList,
          clientID: this.db.customerId,
          typeId: values.typeId,
          reasonType: values.reasonType,
          reason: values.reason,
          type: 0, 
          id: this.db.refundId,
        }).then((res) => {
          if (res.code.toString() !== '200' && res.code) {
            this.$message.error(res.message || res.msg)
            return
          }
          this.$message.success(res.message || res.msg)
          this.add.visible = false
          this.$emit('addFun')
          console.log(res)
        })
      }
    },
    addYCs(value) {
      // 判读输入框实退金额是否输入
      let Num = []
      let setData = this.DetailData.map((item,index) => {
        if (item.retreatDeposit == undefined || item.retreatDeposit === '' || item.retreatDeposit == null) {
          item.specBorder = true
          Num.push(1)
          this.$refs[`specBorder_${index}`].focus(); 
        } else {
          item.specBorder = false
        }
        return item
      })
      this.DetailData = [...setData]
      if (Num.length > 0) {
        this.$message.error('请输入需要实退的金额')
        return false
      }

      console.log(value, '2', this.db.customerId)
      let values = value
      //退预存
      if (this.state === '2' && !this.db.customerId) {
        values.clientID = this.db.cid
        values.billState = 3
        values.deposit = values.dMoney
        //deposit要循环加
        let tgsRefundList = [{ ...values }]

        let customerBillList = [...this.DetailData]
        customerBillList.forEach((item) => {
          item.chargeType = 5
          item.itemName = item.itemName || item.name
          item.deposit = '1' //总共想退的
          // item.retreatDeposit =  //单行想退的
        })
        if (this.customer.name || this.customer.cardNo || this.customer.tel) {
          addRefund({
            customerBillList,
            tgsRefundList,
            orderId: this.orderId || '',
            type: 1,
            clientId: this.db.cid || '',
          }).then((res) => {
            if (res.code.toString() !== '200' && res.code) {
              this.$message.error(res.message || res.msg)
              return
            }
            this.$message.success(res.message || res.msg)
            this.add.visible = false
            this.$emit('addFun')
          })
        }
      } else if (this.state === '2' && this.db.customerId) {
        values.clientID = this.db.customerId
        // values.id = this.db.refundId //修改的时候拿的值
        values.billState = 3
        let customerBillList = [...this.DetailData]
        customerBillList.forEach((item, index) => {
          item.deposit = item.retreatDeposit
          item.integral = item.refundableitemJf
          item.valueGold = item.itemGold
          item.productChargeAmt = item.payableAmt
          item.buyQty = item.qty
          item.qty = item.refundablerqty //可退次数
          item.rqty = item.retreatrqty
          item.rintegral = item.itemJf
          item.rgold = item.retreatitemGold
          item.ramt = item.retreat
          item.amt = item.refundable
          item.itemName = item.name
          item.itemId = item.itemId
          this.orderId = item.orderId
        })
        console.log(value, '1111', customerBillList, this.db.rDeposit)
        editSubmit({
          customerBillList,
          orderId: this.orderId || '',
          type: 1,
          ...values,
          id: this.db.refundId || '',
          // clientId: this.db.customerId || '',
        }).then((res) => {
          if (res.code.toString() !== '200' && res.code) return this.$message.error(res.message || res.msg)
          this.$message.success(res.message || res.msg)
          this.add.visible = false
          this.db.customerId = ''
          this.$emit('addFun')
          console.log(res)
        })
      }
    },
    handleOk() {
      const {
        form: { validateFields },
      } = this
      validateFields((errors, values) => {
        if (errors) {
          console.log('表单检验未通过111', errors, values, this.DetailData)
          this.confirmLoading = false
          return
        }
        if (this.state === '1' && values.typeId === '1') {
          console.log('操作项目', values)
          this.addProject(values)
        } else if (this.state === '2' && values.typeId === '2') {
          console.log('操作退卡', values)
          this.addYCs(values)
        }
      })
    },
    handleCancel() {
      console.log('回调')
      this.customer.name = '-'
      this.customer.cardNo = '-'
      this.customer.tel = '-'
      this.customer.itemAmt = 0
      this.customer.ycAmt = 0
      this.db.customerId = undefined
      this.form.resetFields()
      this.DetailData = []
      this.flag = false
      this.add.visible = false
    },
    remove(record,index) {
      this.DetailData.splice(index, 1)
      let oneArr = this.oneData.filter((item) => {
        return item.onlyId != record.onlyId
      })
      this.oneData = [...oneArr]
      console.log(record.onlyId)
      let twoArr = this.twoData.filter((item) => {
        return item.onlyId != record.onlyId
      })
      this.twoData = [...twoArr]
    },
    changPro() {
      if (this.db.cid !== '') {
        this.miniDB.id = this.db.cid
        this.miniDB.visible = true
        this.miniDB.flag = this.state
        this.miniDB.flags = true
        this.miniDB = Object.assign({},this.miniDB)
        this.$refs.miniTable.ca()
        console.log('新增', this.state)
      } else {
        this.$message.error('请搜索相关用户再添加明细')
      }
    },
  },
}
</script>
<style scoped lang="less">
.lItem-box {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
}
.lItem {
  font-weight: 600;
  font-size: 17px;
  // margin-left: 10px;
  color: rgba(0, 0, 0, 0.85);
}
/deep/ .ant-popover-content {
  width: 800px;
}
/deep/ .ant-modal {
  width: 1280px !important;
}
/deep/ .ant-modal-body {
  margin-bottom: 24px;
}
/deep/ .colorBorder {
  border-color: red !important;
}
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
/deep/ .ant-table-tbody tr{
  height: 65px !important;
}
// ::-webkit-scrollbar-thumb {
//   /*滚动条里面小方块*/
//   border-radius: 10px;
//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
//   background   : #535353;
// }
// ::-webkit-scrollbar-track {
//   /*滚动条里面轨道*/
//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
//   border-radius: 10px;
//   background   : #ededed;
// }

// /deep/ body::-webkit-scrollbar-thumb {
//   /*滚动条里面小方块*/
//   border-radius   : 10px;
//   background-color: skyblue;
//   background-image: -webkit-linear-gradient(
//       45deg,
//       rgba(255, 255, 255, 0.2) 25%,
//       transparent 25%,
//       transparent 50%,
//       rgba(255, 255, 255, 0.2) 50%,
//       rgba(255, 255, 255, 0.2) 75%,
//       transparent 75%,
//       transparent
//   );
// }
// /deep/ body::-webkit-scrollbar-track {
//   /*滚动条里面轨道*/
//   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
//   background   : #ededed;
//   border-radius: 10px;
// }
</style>